<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>话题详情</title>

  <link th:href="@{/css/style.css}" rel="stylesheet">
  <link th:href="@{/css/style-responsive.css}" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>

  <![endif]-->
</head>

<body class="sticky-header left-side-collapsed">

<section>
    <!-- left side start-->
    <!-- left side end-->
    
    <!-- main content start-->
    <div class="main-content" >

        <!-- header section start-->
        <div class="header-section">

        <!--toggle button start-->
        <a class="toggle-btn"><i class="fa fa-bars"></i></a>
        <!--toggle button end-->

        <!--search start-->
<!--        <form class="searchform" action="http://view.jqueryfuns.com/2014/4/10/7_df25ceea231ba5f44f0fc060c943cdae/index.html" method="post">-->
<!--            <input type="text" class="form-control" name="keyword" placeholder="Search here..." />-->
<!--        </form>-->
        <!--search end-->
        <!--notification menu start -->
        <div class="menu-right">
            <ul class="notification-menu">

                <li>
                    <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                        <i class="fa fa-envelope-o"></i>
                        <span class="badge">5</span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-head pull-right">
                        <h5 class="title">你有⑤个通知(该功能正在开发中.....) </h5>
                        <ul class="dropdown-list normal-list">
                            <li class="new">
                                <a href="">
                                        <span class="desc">
                                          <span class="name">John Doe <span class="badge badge-success">new</span></span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user2.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">Jonathan Smith</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user3.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">Jane Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user4.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">Mark Henry</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li>
                                <a href="">
<!--                                    <span class="thumb"><img src="images/photos/user5.png" alt="" /></span>-->
                                        <span class="desc">
                                          <span class="name">Jim Doe</span>
                                          <span class="msg">Lorem ipsum dolor sit amet...</span>
                                        </span>
                                </a>
                            </li>
                            <li class="new"><a href="">Read All Mails</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<!--                        <img src="images/photos/user-avatar.png" alt="" />-->
                        124001
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                        <li><a href="#"><i class="fa fa-user"></i>  个人主页</a></li>
                        <li><a href="#"><i class="fa fa-cog"></i>  设置</a></li>
                        <li><a href="#"><i class="fa fa-sign-out"></i> 注销</a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <!--notification menu end -->

        </div>
        <!-- header section end-->

        <!-- page heading start-->
        <div class="page-heading">
<!--            Page Tittle goes here-->
        </div>
        <!-- page heading end-->

        <!--body wrapper start-->
        <div class="wrapper">
            <div class="row blog">
                <div class="col-md-2">
<!--                    <div class="panel">-->
<!--                        <div class="panel-body">-->
<!--                            <input type="text" placeholder="Search Blog" class="form-control blog-search">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="panel">-->
<!--                        <div class="panel-body">-->
<!--                            <div class="blog-post">-->
<!--                                <h3>Latest Blog Post</h3>-->
<!--                                <div class="media">-->
<!--                                    <a href="javascript:;" class="pull-left">-->
<!--                                        <img alt="" src="images/blog/blog-thumb-1.jpg" class=" ">-->
<!--                                    </a>-->
<!--                                    <div class="media-body">-->
<!--                                        <h5 class="media-heading"><a href="javascript:;">02 May 2013 </a></h5>-->
<!--                                        <p>-->
<!--                                            Donec id elit non mi porta gravida at eget metus amet int-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="media">-->
<!--                                    <a href="javascript:;" class="pull-left">-->
<!--                                        <img alt="" src="images/blog/blog-thumb-2.jpg" class=" ">-->
<!--                                    </a>-->
<!--                                    <div class="media-body">-->
<!--                                        <h5 class="media-heading"><a href="javascript:;">02 May 2013 </a></h5>-->
<!--                                        <p>-->
<!--                                            Donec id elit non mi porta gravida at eget metus amet int-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="media">-->
<!--                                    <a href="javascript:;" class="pull-left">-->
<!--                                        <img alt="" th:src="@{/images/blog/blog-thumb-3.jpg}" class=" ">-->
<!--                                    </a>-->
<!--                                    <div class="media-body">-->
<!--                                        <h5 class="media-heading"><a href="javascript:;">02 May 2013 </a></h5>-->
<!--                                        <p>-->
<!--                                            Donec id elit non mi porta gravida at eget metus amet int-->
<!--                                        </p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>

                <div class="col-md-8">
                    <div class="blog">
                        <div class="single-blog">
                            <div class="panel">
                                <div class="panel-body">
                                    <h1 class="text-center mtop35" th:text="${thistopic.getTitle()}"></h1>
                                    <p class="text-center auth-row">
                                         发帖者:124001   |   [[${thistopic.getPosttime()}]]   | [[${comments.size()}]] 条评论
                                    </p>
<!--                                    <div class="blog-img-wide">-->
<!--&lt;!&ndash;                                        <img th:src="${'images/blog/blog-wide-img.jpg'}" alt=""/>&ndash;&gt;-->
<!--                                    </div>-->

                                    <blockquote>
                                        <p th:text="${thistopic.getTcontent()}" style="font-size: x-large">
                                            Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Aenean eu leo quam. 				Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat port			titor ligula, eget lacinia odio sem nec elit.
                                        </p>
                                    </blockquote>

<!--                                    <p>-->
<!--                                        consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.-->

<!--                                    </p>-->

<!--                                    <div class="blog-tags">-->
<!--                                        TAGS <a href="#">photoshop</a> <a href="#">illustrator</a> <a href="#">adobe</a> <a href="#">theme</a>-->
<!--                                        <div class="pull-right tag-social">-->
<!--                                            <a href="#" class="btn btn-share pull-right">Share</a>-->

<!--                                            <ul class="pull-right">-->
<!--                                                <li>-->
<!--                                                    <a href="#">-->
<!--                                                        <i class="fa fa-facebook"></i>-->
<!--                                                    </a>-->
<!--                                                </li>-->
<!--                                                <li>-->
<!--                                                    <a href="#">-->
<!--                                                        <i class="fa fa-twitter"></i>-->
<!--                                                    </a>-->
<!--                                                </li>-->
<!--                                                <li>-->
<!--                                                    <a href="#">-->
<!--                                                        <i class="fa fa-google-plus"></i>-->
<!--                                                    </a>-->
<!--                                                </li>-->
<!--                                            </ul>-->
<!--                                        </div>-->
<!--                                    </div>-->
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <h1 class="text-center cmnt-head ">发 布 评 论</h1>
<!--                                    <p class="text-center fade-txt">If you want you can <a href="#">Cancel Reply</a></p>-->

                                    <form role="form" class="form-horizontal leave-cmnt" method="post" th:action="@{/addcomment/{tno}(tno=${thistopic.getTno()})}">
                                        <div class="form-group">
                                            <div class="col-lg-12">
                                                <textarea name="ccontent" class="form-control" rows="8" placeholder="Message"></textarea>
                                            </div>
                                        </div>
                                        <p>
                                            <button class="btn btn-post-cmnt pull-right" type="submit">发表</button>
                                        </p>
                                    </form>
                                </div>
                            </div>
                            <div class="panel">
                                <div class="panel-body">
                                    <h1 class="text-center cmnt-head">[[${comments.size()}]] 条评论</h1>
                                    <div class="media blog-cmnt" th:each="commentslist:${comments}">
<!--                                        <a href="javascript:;" class="pull-left">-->
<!--                                            <img alt="" src="images/blog/blog-avatar-2.jpg" class="media-object">-->
<!--                                        </a>-->
                                        <div class="media-body">
                                            <h4 class="media-heading">
                                                <a href="#" th:text="${commentslist.getCname()}">jones</a>
                                            </h4>
                                            <div class="bl-status">
                                                <span class="pull-left" th:text="${commentslist.getCtime()}">About 10 Min ago</span>
<!--                                                <a href="#" class="pull-right reply">Reply</a>-->
                                            </div>
                                            <p class="mp-less" th:text="${commentslist.getCcontent()}">
                                                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit.
                                            </p>
                                            <p>
                                                ----------------------------------------------------------------------------------------------------------
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!--body wrapper end-->

        <!--footer section start-->
<!--        <footer class="sticky-footer">-->
<!--            <div class="btn-group" >-->
<!--                <a class="btn btn-danger btn-sm" type="button" href="#"> 发表新话题</a>-->
<!--            </div>-->
<!--        </footer>-->
        <!--footer section end-->
    </div>

    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<script th:src="@{/js/jquery.nicescroll.js}"></script>

<!--common scripts for all pages-->
<script th:src="@{/js/scripts.js}"></script>
<script>
   var ww = $(window).width()
   $(window).resize(function(){
       if (ww < 800){
           $(body).removeClass('left-side-collapsed');
       }

   });
</script>

</body>
</html>
